<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Static Tables</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Tables</a>
            </li>
            <li class="active">
                <strong>Static Tables</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Basic Table</h5>

                <div ibox-tools></div>
            </div>
            <div class="ibox-content">

                <table class="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Striped Table </h5>

                <div ibox-tools></div>
            </div>
            <div class="ibox-content">

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Data</th>
                        <th>User</th>
                        <th>Value</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td><line-chart data="main.LineChart4.data" options="main.LineChart4.options"></line-chart></td>
                        <td>Samantha</td>
                        <td class="text-navy"><i class="fa fa-level-up"></i> 40%</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td><line-chart data="main.LineChart2.data" options="main.LineChart2.options"></line-chart></td>
                        <td>Jacob</td>
                        <td class="text-warning"><i class="fa fa-level-down"></i> -20%</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td><line-chart data="main.LineChart3.data" options="main.LineChart3.options"></line-chart></td>
                        <td>Damien</td>
                        <td class="text-navy"><i class="fa fa-level-up"></i> 26%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Border Table </h5>

                <div ibox-tools></div>
            </div>
            <div class="ibox-content">

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Hover Table </h5>

                <div ibox-tools></div>
            </div>
            <div class="ibox-content">

                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Data</th>
                        <th>User</th>
                        <th>Value</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td><pie-chart data="main.PieChart4.data" options="main.PieChart4.options"></pie-chart></td>
                        <td>Samantha</td>
                        <td class="text-navy"><i class="fa fa-level-up"></i> 40%</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td><pie-chart data="main.PieChart3.data" options="main.PieChart3.options"></pie-chart></td>
                        <td>Jacob</td>
                        <td class="text-warning"><i class="fa fa-level-down"></i> -20%</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td><pie-chart data="main.PieChart2.data" options="main.PieChart2.options"></pie-chart></td>
                        <td>Damien</td>
                        <td class="text-navy"><i class="fa fa-level-up"></i> 26%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Custom responsive table </h5>

                <div ibox-tools></div>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-5 m-b-xs"><select class="input-sm form-control input-s-sm inline">
                        <option value="0">Option 1</option>
                        <option value="1">Option 2</option>
                        <option value="2">Option 3</option>
                        <option value="3">Option 4</option>
                    </select>
                    </div>
                    <div class="col-sm-4 m-b-xs">
                        <div data-toggle="buttons" class="btn-group">
                            <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> Day </label>
                            <label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> Week </label>
                            <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> Month </label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="input-group"><input type="text" placeholder="Search" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> Go!</button> </span></div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>

                            <th></th>
                            <th>Project</th>
                            <th>Completed</th>
                            <th>Task</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input icheck type="checkbox" ng-model="main.checkOne"></td>
                            <td>Project
                                <small>This is example of project</small>
                            </td>
                            <td><pie-chart data="main.PieChart4.data" options="main.PieChart4.options"></pie-chart></td>
                            <td>20%</td>
                            <td>Jul 14, 2013</td>
                            <td><a href=""><i class="fa fa-check text-navy"></i></a></td>
                        </tr>
                        <tr>
                            <td><input icheck type="checkbox" ng-model="main.unCheck1"></td>
                            <td>Alpha project</td>
                            <td><pie-chart data="main.PieChart3.data" options="main.PieChart3.options"></pie-chart></td>
                            <td>40%</td>
                            <td>Jul 16, 2013</td>
                            <td><a href=""><i class="fa fa-check text-navy"></i></a></td>
                        </tr>
                        <tr>
                            <td><input icheck type="checkbox" ng-model="main.unCheck2"></td>
                            <td>Betha project</td>
                            <td><pie-chart data="main.PieChart2.data" options="main.PieChart2.options"></pie-chart></td>
                            <td>75%</td>
                            <td>Jul 18, 2013</td>
                            <td><a href=""><i class="fa fa-check text-navy"></i></a></td>
                        </tr>
                        <tr>
                            <td><input icheck type="checkbox" ng-model="main.unCheck3"></td>
                            <td>Gamma project</td>
                            <td><pie-chart data="main.PieChart5.data" options="main.PieChart5.options"></pie-chart></td>
                            <td>18%</td>
                            <td>Jul 22, 2013</td>
                            <td><a href=""><i class="fa fa-check text-navy"></i></a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

</div>
</div>
